<!--
 描述: 酷屏首页模板
 作者: Jack Chen
 日期: 2020-04-29
-->

<template>
    <div class="home-container">
        <div class="wrap" ref="editor">
            <div class="top"></div>

            <sinan />
            <seamless />
            <scrollArc />
            <pyramid />


            <szBar />

            <ringPin />
            <rotateColorful />
            <circleRunway />
            <scanRadius />

            <cakeLinkage />
            <pyramidTrend />
            <dynamicLine />

            <staffMix />
            <flashCloud />
            <ringPie />
            <colorfulRadar />

            <dynamicList />
            <bar3d />
            <colorfulArea />

            <rainbow />
            <gauge />
            <waterPolo />
            <circleNesting />

            <div class="divider"></div>

        </div>

    </div>
</template>

<script>
import { screenSize } from '@/assets/js/utils'

export default {
    name: 'Home',
    components: {},
    data() {
        return {

        }
    },
    computed: {

    },
    created() {
    },
    mounted() {
        screenSize(this.$refs.editor);
    },
    methods: {

    }
}
</script>

<style lang="scss" scoped>
.home-container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;

    .wrap {
        transform-origin: 0px 0px 0px;
        background: url(../assets/img/bj.jpg) no-repeat;
        background-size: contain;
        background-position: 50% 0;
        background-color: rgb(0, 0, 0);
        min-width: auto;
        width: 1920px;
        min-height: auto;
        height: 1080px;
        overflow: auto;

        .top {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100px;
            background-color: transparent;
            text-align: center;

            color: #00FF00;
            font-size: 50px;
            // background: url(../assets/img/top_nav.png) no-repeat;
            background-position: 65% 0;
            border: none;
            overflow: hidden;
        }

        .divider {
            position: absolute;
            left: 50px;
            top: 3253px;
            width: 90%;
            height: 50px;
            width: 300px;
            border: none;
            background: transparent;
        }

    }
}
</style>
